<!DOCTYPE html>
<html>
<head>
    <title>菜单管理</title>
   <!-- #parse("sys/header.html")-->
    <#include "../header.html" encoding="UTF-8"/>

    <link rel="stylesheet" type="text/css" href="/static/cms/menu/base.css">
    <link rel="stylesheet" href="/static/cms/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/cms/menu/tree_structure.css">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            &nbsp;&nbsp;
            <i-button type="ghost" @click="reload"><i class="fa fa-refresh"></i>&nbsp;刷新</i-button>
            <!--#if($shiro.hasPermission("sys:menu:save"))-->
            <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
           <!-- #end
            #if($shiro.hasPermission("sys:menu:update"))-->
            <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
            <!--#end
            #if($shiro.hasPermission("sys:menu:delete"))-->
            <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
            <!--#end-->
        </Row>
        <table id="jqGrid"></table><!--数据展示的table-->
        <div id="jqGridPager"></div>
    </div>

    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="permission" :rules="ruleValidate" :label-width="80">
            <Form-item label="类型" prop="type">
                <Radio-group v-model="permission.type">
                    <Radio label="0">
                        <span>目录</span>
                    </Radio>
                    <Radio label="1">
                        <span>菜单</span>
                    </Radio>
                    <Radio label="2">
                        <span>按钮</span>
                    </Radio>
                </Radio-group>
            </Form-item>
            <Form-item label="菜单名称" prop="name">
                <i-input v-model="permission.name" placeholder="菜单名称或按钮名称"/>
            </Form-item>

            <Form-item label="上级菜单" v-if="permission.type == 2" prop="parentName">
                <i-input v-model="permission.parentName" @on-click="menuTree" icon="eye" readonly="readonly"
                         placeholder="一级菜单"/>
            </Form-item>
            <Form-item label="上级菜单" v-if="permission.type != 2">
                <i-input v-model="permission.parentName" @on-click="menuTree" icon="eye" readonly="readonly"
                         placeholder="一级菜单"/>
            </Form-item>

            <Form-item v-if="permission.type == 1" label="菜单URL" prop="url">
                <i-input v-model="permission.url" placeholder="菜单URL"/>
            </Form-item>
            <Form-item v-if="permission.type == 1 || permission.type == 2" label="授权标识" prop="perms">
                <i-input v-model="permission.perms" placeholder="多个用逗号分隔，如：user:list,user:create"/>
            </Form-item>
            <Form-item v-if="permission.type != 2" label="排序号" prop="sort">
                <Input-number :min="0" :step="1" v-model="permission.sort" placeholder="排序号" style="width: 188px;"/>
            </Form-item>
           <!-- <Form-item v-if="permission.type != 2" label="图标" prop="icon">
                <i-input v-model="permission.icon" placeholder="图标，点击右边按钮选取图标" @on-click="selectIcon" icon="eye"/>
            </Form-item>-->
            <Form-item label="状态" prop="status">
                <Radio-group v-model="permission.status">
                    <Radio label="1">
                        <span>有效</span>
                    </Radio>
                    <Radio label="0">
                        <span>无效</span>
                    </Radio>
                </Radio-group>
            </Form-item>
            <Form-item>
                <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px">返回</i-button>
                <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
            </Form-item>
        </i-form>
    </Card>
</div>

<!--<section class="main">
    <div class="box_content">
        &lt;!&ndash;-&#45;&#45;组织目录表格-&#45;&#45;&ndash;&gt;
        <ul class="catalog_tree_tabal">
            &lt;!&ndash;头部标题&ndash;&gt;
            <li class="catalog_table_list catalog_table_top">
                <dl class="catalog_list_content">
                    <dt class="catalog_tree_item">菜单名称</dt>
                    <dd>序号</dd>
                    <dd>编码</dd>
                    <dd>状态</dd>
                    <dd class="width30">路径</dd>
                    <dd class="tabel_operate catalog_operate">操作</dd>
                </dl>
            </li>
            &lt;!&ndash;-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;菜单数据-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;
            <#if menus?? && menus?size != 0>
                &lt;!&ndash;遍历一级菜单&ndash;&gt;
                <#list menus as item>
                    <li id="li${item.id!'' }" class="catalog_table_list">
                        <dl class="catalog_list_content">
                            <dt class="catalog_tree_item" >
                                <i id="i${item.id!'' }" class="catalog_tree_icon"></i>
                                <i class="catalog_grade_icon"></i>
                                <span>${item.name!'' }</span>
                            </dt>
                            <dd>${item.sort!'' }</dd>
                            <dd>${item.code!'' }</dd>
                            <dd>${item.statusStr!'' }</dd>
                            <dd class="width30">${item.path }</dd>
                            <dd class="tabel_operate catalog_operate">
                                <@p.permission bizCode='${bizCode }04'>
                                <a href="javascript:;" data-id="${item.id!'' }" data-method="deleteById"
                                   class="tabel_btn tabel_delect_icon" title="删除"></a>
                            </@p.permission>
                            <@p.permission bizCode='${bizCode }03'>
                            <a href="javascript:;" data-id="${item.id!'' }" data-method="saveOrUpdate"
                               class="tabel_btn tabel_edit_icon" title="编辑"></a>
                        </@p.permission>
                        <@p.permission bizCode='${bizCode }02'>
                        <a href="javascript:;" data-id="${item.id!'' }" data-method="addChildren"
                           class="tabel_btn tabel_detail_icon" title="添加下级"></a>
                    </@p.permission>
                    </dd>
                    </dl>
                    &lt;!&ndash;遍历二级菜单&ndash;&gt;
                    <#if item.children?? && item.children?size != 0>
                        <ul class="next_catalog_modular">
                            <#list item.children as items>
                                <li id="li${items.id!'' }" class="catalog_table_list catalog_list_grade02"> &lt;!&ndash;catalog_list_grade02为二级目录，三级为03，以此类推&ndash;&gt;
                                    <dl class="catalog_list_content">
                                        <dt class="catalog_tree_item">
                                            <i id="i${items.id!'' }" class="catalog_tree_icon"></i>
                                            <i class="catalog_grade_icon"></i>
                                            <span>${items.name!'' }</span>
                                        </dt>
                                        <dd>${items.sort!'' }</dd>
                                        <dd>${items.code!'' }</dd>
                                        <dd>${items.statusStr!'' }</dd>
                                        <dd class="width30">${items.path!'' }</dd>
                                        <dd class="tabel_operate catalog_operate">
                                            <@p.permission bizCode='${bizCode }04'>
                                            <a href="javascript:;" data-id="${items.id!'' }" data-method="deleteById"
                                               class="tabel_btn tabel_delect_icon" title="删除"></a>
                                        </@p.permission>
                                        <@p.permission bizCode='${bizCode }03'>
                                        <a href="javascript:;" data-id="${items.id!'' }" data-method="saveOrUpdate"
                                           class="tabel_btn tabel_edit_icon" title="编辑"></a>
                                    </@p.permission>
                                    <@p.permission bizCode='${bizCode }02'>
                                    <a href="javascript:;" data-id="${items.id!'' }" data-method="addChildren"
                                       class="tabel_btn tabel_detail_icon" title="添加下级"></a>
                                </@p.permission>
                                </dd>
                                </dl>
                                &lt;!&ndash;遍历三级菜单&ndash;&gt;
                                <#if items.children?? && items.children?size != 0>
                                    <ul class="next_catalog_modular">
                                        <#list items.children as btn>
                                            <li id="li${btn.id!'' }" class="catalog_table_list catalog_list_grade03">
                                                <dl class="catalog_list_content">
                                                    <dt class="catalog_tree_item">
                                                        <i id="i${btn.id!'' }" class="catalog_tree_icon"></i>
                                                        <i class="catalog_grade_icon"></i>
                                                        <span>${btn.name!'' }</span>
                                                    </dt>
                                                    <dd>${btn.sort!'' }</dd>
                                                    <dd>${btn.code!'' }</dd>
                                                    <dd>${btn.statusStr}</dd>
                                                    <dd class="width30">${btn.path!'' }</dd>
                                                    <dd class="tabel_operate catalog_operate">
                                                        &lt;!&ndash; 按钮不可以继续添加下级&ndash;&gt;
                                                        <@p.permission bizCode='${bizCode }04'>
                                                        <a href="javascript:;" data-id="${btn.id!'' }"
                                                           data-method="deleteById" class="tabel_btn tabel_delect_icon" title="删除"></a>
                                                    </@p.permission>
                                                    <@p.permission bizCode='${bizCode }03'>
                                                    <a href="javascript:;" data-id="${btn.id!'' }"
                                                       data-method="saveOrUpdate" class="tabel_btn tabel_edit_icon" title="编辑"></a>
                                                </@p.permission>
                                                </dd>
                                                </dl>
                                            </li>
                                        </#list>
                                    </ul>
                                </#if>
                                </li>
                            </#list>
                        </ul>
                    </#if>
                    </li>
                </#list>
            </#if>
        </ul>
    </div>
    <#if bizCode??>
        <input type="hidden" id="bizCode" value="${bizCode!'' }">
    </#if>
</section>-->

<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
    <ul id="menuTree" class="ztree"></ul>
</div>

<script src="${rc.contextPath}/static/vue/js/sys/menu.js"></script>

<!--------------------------------- JS ---------------------------------------->
<script src="/static/cms/layui/layui.js"></script>


</body>
</html>